<template>
	<view class="message-item mb-10" @click="clickMessage()">
		<view class="row-box center time-box">
			<text class="s26">{{ item.ct }}</text>
		</view>
		<view v-if="type==0" class="col-box sb pall-l radius-l content-card" style="padding-right: 32rpx;">
			<view v-if="item.status==0" class="allert"></view>
			<text class="mb-10">{{ item.title }}</text>
			<text class="s24 grey-dark">{{ item.content }}</text>
		</view>
		<view v-else-if="type==1" class="col-box sb pall-l radius-l content-card">
			<view v-if="item.status==0" class="allert"></view>
			<view class="row-box mb-10 post-content">
				<image class="message-image-86 radius-base" :src="postImage()" mode="aspectFill"></image>
				<text class="grey-light limit2">{{ item.title }}</text>
			</view>
			<text class="limit4">{{ item.content }}</text>
		</view>
		<view v-else-if="type==2" class="col-box sb pall-l radius-l content-card">
			<view v-if="item.status==0" class="allert"></view>
			<view class="row-box sb mb-10">
				<view class="row-box" style="height: 100%;">
					<u-avatar class="mr-l message-image-86" :size="86" :src="item.userIcon"></u-avatar>
					<view class="col-box sb" style="height: 86rpx;padding-right: 20rpx;">
						<text>{{ item.userNickName }}</text>
						<text class="s24 grey-light">{{ item.title }}</text>
					</view>
				</view>
				<image class="radius-base message-image-128" :src="postImage()" mode="heightFix"></image>
			</view>
			<text>{{ item.content }}</text>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			item: {
				type: Object,
				default: function(){
				  return {}
				}
			}, // 消息项
			
			type: {
				type: Number,
				default: 0
			}, // 消息类型 通知0 评论1 回复点赞2
		},
		data() {
			return {
				
			}
		},
		methods: {
			// 点击消息处理
			clickMessage() {
				if (this.type==1) {
					this.goDetail()
				} else {
					this.$api.ReadMessage({
						messageId: this.item.id,
					}).then(res => {
						console.log('ReadMessage-success', res)
						if (res.data.code == 200) {
							this.goDetail()
						} else {
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							})
						}
					}).catch(err => {
						console.log('ReadMessage-fail', err)
					})
				}
			},
			
			// 根据动态是否是视频跳转到对应动态详情页
			goDetail() {
				if (this.item.video) {
					uni.navigateTo({
						url: `/pages/subPackage/post/post_video/post_video?id=${this.item.subjectId}`
					})
				} else {
					uni.navigateTo({
						url: `/pages/subPackage/post/post_image/post_image?id=${this.item.subjectId}`
					})
				}
			},
			
			// 动态封面图
			postImage() {
				if (this.item.video) return this.item.coverImage
				let arr = this.item.images.split(",")
				return arr[0]
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 消息盒子
	.message-item {
		margin-left: 32rpx;
		margin-right: 32rpx;
		// 时间盒子
		.time-box {
			height: 94rpx;
		}
		// 内容卡片
		.content-card {
			box-shadow: 0 0 10rpx #d5d5d5;
			padding-bottom: 20rpx;
			position: relative;
			&:last-child {
				margin-bottom: 20rpx;
			}
			.allert {
				width: 16rpx;
				height: 16rpx;
				border-radius: $uni-border-radius-circle;
				background: $uni-color-primary;
				position: absolute;
				top: -8rpx;
				right: -8rpx;
				z-index: 99;
			}
			// 动态内容
			.post-content {
				display: grid;
				grid-template-columns: 86rpx 1fr;
				column-gap: 10rpx;
				
			}
		}
		// 消息里的图片
		.message-image-86 {
			display: block;
			width: 86rpx;
			height: 86rpx;
		}
		.message-image-128 {
			display: block;
			height: 128rpx;
		}
	}
</style>
